<template>
  <div>
    <nav-bar title="搜索结果" />
    <main>
      <!-- 文章列表 -->
      <van-loading
        v-if="articleListLoading"
        class="loading"
        color="#1989fa"
      />
      <van-empty
        v-else-if="!searchResult"
        image="error"
        description="请求错误"
      />
      <van-empty
        v-else-if="!searchResult.length"
        description="暂无数据"
      />
      <article-list
        v-else
        :data="searchResult"
      />
    </main>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';

export default {
  name: 'SearchResult',
  data() {
    return {
      articleListLoading: false,
    };
  },
  computed: {
    ...mapState('search', [
      'searchResult',
    ]),
  },
  methods: {
    ...mapActions('search', [
      'updateSearchResult',
    ]),
    ...mapMutations('search', [
      'SET_SEARCH_RESULT',
    ]),
  },
  async created() {
    // // 路由实例
    // console.log(this.$router);
    // // 当前路由信息
    // console.log(this.$route.query.q);

    // 请求前设置loading
    this.articleListLoading = true;
    await this.updateSearchResult(this.$route.query.q);
    this.articleListLoading = false;
  },
  beforeDestroy() {
    this.SET_SEARCH_RESULT([]);
  },
}
</script>

<style lang="less" scoped>
main {
  padding: 0 8px;

  .loading {
    display: flex;
    justify-content: center;
    margin: 50px;
  }
}
</style>
